<template>
	<view>

		<!-- <u-sticky>
			<view class="bg-white u-p-b-20">
				<view class="u-m-l-40 u-m-r-40">
					<u-subsection :list="sublist" :current="current" @change="sbuChange" inactiveColor="#999"
						mode="subsection" activeColor="#FF5B00" bgColor="#fff"></u-subsection>
				</view>
				<u-tabs :list="list1" lineColor="#FF5B00" :activeStyle="activeStyle"
					@click="handleChangeGetUserOrderInfoList()" :lineWidth="20" :scrollable="false"></u-tabs>
			</view>
		</u-sticky> -->
		<u-empty mode="order" icon="http://cdn.uviewui.com/uview/empty/order.png" v-if="orderList.length==0">
		</u-empty>
		<view class="card" v-for="(order,j) in orderList" :key="j"
			@click="$u.route('/pages/order/info/info?id='+order.id+'&qingyangOrderId='+order.qingyangOrderId)">
			<view class="flex align-center justify-between cell">
				<view class="time">下单时间：{{order.createTime}}</view>
				<view v-if="order.status==0" class="loading">{{handleOrderStatusFormat(order.status,order.orderType)}}
				</view>
				<view v-else-if="order.status==1" class="success-load">
					{{handleOrderStatusFormat(order.status,order.orderType)}}
				</view>
				<view v-else-if="order.status==2" class="success">
					{{handleOrderStatusFormat(order.status,order.orderType)}}
				</view>
				<view v-else-if="order.status==3" class="cancel">
					{{handleOrderStatusFormat(order.status,order.orderType)}}
				</view>
				<view v-else style="color: #999;">{{handleOrderStatusFormat(order.status,order.orderType)}}</view>
			</view>
			<view v-for="(orderDetails,k) in order.orderDetails" :key="k" class="flex product u-p-t-20 u-p-b-20">
				<view class="img-box">
					<u-image :showLoading="true" mode="aspectFill" radius="8rpx" :src="orderDetails.image"
						width="174rpx" height="174rpx">
						<view slot="loading">
							<u-loading-icon></u-loading-icon>
						</view>
					</u-image>
				</view>
				<view class="u-m-l-10">
					<view class="ellipsis2 text-black">{{orderDetails.productName}}</view>
					<view class="u-m-t-10 u-font-xs text999">{{orderDetails.unit}}</view>
					<view class="u-m-t-10 flex align-center justify-between">
						<view style="color: #FD002B;">
							<text class="text-bold  u-font-xs">￥</text>
							<text
								class="u-font-lgm  text-bold u-m-r-16">{{parseFloat(orderDetails.salePrice).toFixed(2)}}</text>
							<text class="u-font-xs" style="color: #999;">原价：</text>
							<text class="u-font-xs"
								style="color: #999;text-decoration: line-through;">{{parseFloat(orderDetails.price).toFixed(2)}}</text>
							<!-- <text class="u-font-xs  text-bold"></text> -->
						</view>
						<view class="u-font-xs text999">x{{orderDetails.count}}</view>
					</view>
				</view>
			</view>
			<view class="flex align-center justify-between u-p-t-20 top-border">
				<view class="text999">单号:{{order.id}}</view>
				<view class="text-black" v-if="order.status==0">已支付￥{{parseFloat(order.payAmount).toFixed(2)}}
				</view>
				<view class="text-black" v-else>应支付￥{{parseFloat(order.saleAmount).toFixed(2)}}</view>
			</view>
		</view>

		<xloadmore :status="xloadmore"></xloadmore>

	</view>
</template>

<script>
	import {
		getUserOrderInfoList,
		getDictList
	} from '@/common/api/api.js'
	export default {
		data() {
			return {
				params: {
					pageNum: 1,
					pageSize: 5,
				},
				xloadmore: "loadmore",
				sublist: ['洗护订单', '商城订单'],
				current: 0,
				list1: [{
					name: '全部',
				}, {
					name: '待支付',
				}, {
					name: '进行中',
				}, {
					name: '已完成',
				}, {
					name: '退款',
				}],
				activeStyle: {
					color: '#FF5B00'
				},
				userInfoId: '',
				status: '',
				orderList: [],
				orderType: "0",
				xihOrderStatus: [],
				mallOrderStatus: [],
			}
		},
		onShow(options) {
			this.userInfoId = this.$store.state.$token;
			this.handleGetUserOrderInfoList();
			this.handleGetDictList();

		},
		methods: {
			sbuChange(index) {
				this.current = index;
				this.orderType = index;
				this.orderList = [];
				this.handleGetUserOrderInfoList();
			},
			// 读取用户订单信息
			handleGetUserOrderInfoList() {
				this.xloadmore = "loading";
				getUserOrderInfoList({
					userInfoId: this.userInfoId,
					status: this.status,
					orderType: this.orderType,
					...this.params
				}).then(res => {
					if (this.orderList.length < res.data.total) {
						this.params.pageNum++
						res.data.list.map(e => {
							this.orderList.push(e);
						})
					}
					this.xloadmore = "nomore";
				})
			},
			handleGetDictList() {
				getDictList({
					type: 'order_status_mall'
				}).then(res => {
					this.mallOrderStatus = res.data;
				})
				getDictList({
					type: 'order_status_xihu'
				}).then(res => {
					this.xihOrderStatus = res.data;
				})
			},
			// 格式化状态
			handleOrderStatusFormat(status, type) {

				if (0 == type) {
					return this.$utils.selectDictLabel(this.xihOrderStatus, status)
				}
				if (1 == type) {
					return this.$utils.selectDictLabel(this.mallOrderStatus, status)
				}
			},
			handleChangeGetUserOrderInfoList(e) {
				this.orderList = [];
				if (!e) {
					this.status = '';
				} else {
					if (this.orderType == 0) {
						if (e.index == 0) {
							this.status = '';
						}
						if (e.index == 1) {
							this.status = '-1';
						}
						if (e.index == 2) {
							this.status = '0';
						}
						if (e.index == 3) {
							this.status = '2';
						}
						if (e.index == 4) {
							this.status = '-99';
						}

					}
					if (this.orderType == 1) {
						if (e.index == 0) {
							this.status = '';
						}
						if (e.index == 1) {
							this.status = '-1';
						}
						if (e.index == 2) {
							this.status = '0';
						}
						if (e.index == 3) {
							this.status = '2';
						}
						if (e.index == 4) {
							this.status = '-99';
						}

					}
				}

				this.handleGetUserOrderInfoList();
			}

		},
		onReachBottom() {
			if (this.params.pageNum != 1) {
				this.$u.throttle(this.handleGetUserOrderInfoList(), 300);
			}
		},
		onPullDownRefresh() {
			uni.stopPullDownRefresh();
			this.params.pageNum = 1;
			this.handleGetUserOrderInfoList();
			this.handleGetDictList();
		}
	}
</script>

<style lang="scss">
	.card {
		padding: 22rpx;
		width: 686rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
		margin-left: 32rpx;
		margin-right: 32rpx;
		margin-top: 20rpx;

		.cell {
			padding-bottom: 22rpx;
			border-bottom: 1px solid #EEEEEE;

			.time {
				font-size: 28rpx;
				color: #999999;
			}

			.loading {
				color: #FFA42E;
			}

			.success-load {
				color: #FF5B00;
			}

			.success {
				color: #0B9126;
			}

			.error {
				color: #FD002B;
			}

			.cancel {
				color: #FD4E00;
			}
		}

		.top-border {
			border-top: 2rpx solid #EEEEEE;
		}

	}
</style>